<template>
  <div class="container">
    <div class="opt-area-02">
      <div class="left-con">
        <Button type="info" @click="addShow" style="margin-top: 0px;margin-right:10px">新增</Button>
      </div>
    </div>
    <Table :loading="loading" border :columns="columns" :data="dataList" size="small" ref="table">
      <template slot-scope="{ row }" slot="DIC_PART_ORG_TYPE_NAME">
        <span v-show="row.DIC_PART_ORG_TYPE === '1'">党委</span>
        <span v-show="row.DIC_PART_ORG_TYPE === '2'">党总支</span>
        <span v-show="row.DIC_PART_ORG_TYPE === '3'">党支部</span>
        <span v-show="row.DIC_PART_ORG_TYPE === '4'">党小组</span>
      </template>
      <template slot="action" slot-scope="{ row }">
        <Row style="margin-bottom: 5px; margin-top: 2px">
          <Button class="table-action-btn" style="margin-right: 5px" type="info" size="small" @click="editShow(row)">编辑</Button>
          <Button class="table-action-btn" style="margin-right: 5px" type="error" size="small" @click="deleteShow(row)">删除</Button>
        </Row>
      </template>
    </Table>
    <Row type="flex" justify="end" class="page_style">
      <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize" show-elevator
            @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
    </Row>
    <Modal width="600" v-model="modal" :title="showTitle">
      <Row class="item1">
        <Col span="4" style="text-align: right" class=""><span style="color: red">*</span>党组织类别:</Col>
        <Col span="17" offset="1">
          <Select placeholder="请选择党组织类别" v-model="addData.DIC_PART_ORG_TYPE">
            <Option v-for="(item,index) in tableList" :value="item.id" :key="index">{{ item.name }}</Option>
          </Select>
        </Col>
      </Row>
      <Row class="item1">
        <Col span="4" style="text-align: right" class=""><span style="color: red">*</span>党组织代码:</Col>
        <Col span="17" offset="1" >
          <Input v-model="addData.PART_ORG_CODE"></Input>
        </Col>
      </Row>
      <Row class="item1">
        <Col span="4" style="text-align: right" class=""><span style="color: red">*</span>党组织名称:</Col>
        <Col span="17" offset="1">
          <Input v-model="addData.PART_ORG_NAME"></Input>
        </Col>
      </Row>
      <Row class="item1">
        <Col span="4" style="text-align: right" class="">党组织负责人:</Col>
        <Col span="17" offset="1" >
          <Input v-model="addData.ORG_EMPL"></Input>
        </Col>
      </Row>
      <Row class="item1">
        <Col span="4" style="text-align: right" class="">党组织联系方式:</Col>
        <Col span="17" offset="1">
          <Input v-model="addData.ORG_TEL"></Input>
        </Col>
      </Row>
      <Row class="item1">
        <Col span="4" style="text-align: right" class="">管辖网格:</Col>
        <Col span="17" offset="1">
        </Col>
      </Row>
      <CheckboxGroup v-model="addData.GRID_IDS">
        <Checkbox v-for="(item,index) in gardenList" :key="index" :label="item.id" border>{{item.name}}</Checkbox>
      </CheckboxGroup>
      <div slot="footer">
        <Button type="success" @click="addInfo(addData)">保存</Button>
        <Button type="error" @click="modal=false">关闭</Button>
      </div>
    </Modal>
  </div>
</template>

<script>

import { addDangZuZhiInfo, updateDangZuZhiInfo, findDangZuZhiList, deleteDangZuZhiInfo } from '@/api/dangqun'
import { newFindGardenByMapList } from '../../../api/z-new-grid'
export default {
  name: 'dangzuzhiguanli',
  data () {
    return {
      showTitle: '',
      modal: false,
      dataList: [],
      loading: false,
      columns: [
        { title: '党组织名称', key: 'PART_ORG_NAME', align: 'center' },
        { title: '党组织代码', key: 'PART_ORG_CODE', align: 'center' },
        { title: '党组织类别', slot: 'DIC_PART_ORG_TYPE_NAME', align: 'center' },
        { title: '党组织负责人', key: 'ORG_EMPL', align: 'center' },
        { title: '党组织联系方式', key: 'ORG_TEL', align: 'center' },
        // { title: '党员数量', key: 'REGION_CODE', align: 'center' },
        { title: '操作', align: 'center', width: 160, slot: 'action', fixed: 'right' }
      ],
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0,
        RESIDENTIAL_ID: '',
        COMMUNITY_ID: '',
        GARDEN_ID: ''
      },
      addData: {},
      severUserInfo: {},
      addressList: [],
      tableList: [
        { name: '党委', id: '1' },
        { name: '党总支', id: '2' },
        { name: '党支部', id: '3' },
        { name: '党小组', id: '4' }
      ],
      gardenList: []
    }
  },
  methods: {
    init () {
      findDangZuZhiList(this.params).then(ret => {
        if (ret.data.errcode === 0) {
          this.dataList = ret.data.data.results
          this.params.totalRecord = ret.data.data.totalRecord
          this.loading = false
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    selectlist (e) {
      this.params.pageNo = e
      this.init()
    },
    pageAction (page) {
      this.params.pageNo = page
      this.init()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.selectlist(this.params.pageNo)
    },
    addInfo () {
      let param = {
        ID: this.addData.ID,
        PART_ORG_NAME: this.addData.PART_ORG_NAME,
        PART_ORG_CODE: this.addData.PART_ORG_CODE,
        DIC_PART_ORG_TYPE: this.addData.DIC_PART_ORG_TYPE,
        DIC_PART_ORG_TYPE_NAME: this.addData.DIC_PART_ORG_TYPE_NAME,
        ORG_EMPL: this.addData.ORG_EMPL,
        ORG_TEL: this.addData.ORG_TEL,
        REGION_CODE: this.severUserInfo.company_id,
        GRID_IDS: this.addData.GRID_IDS.join(',')
      }
      let url = this.addData.ID === undefined ? addDangZuZhiInfo : updateDangZuZhiInfo
      url(param).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '操作成功' })
          this.modal = false
          this.init()
        } else {
          this.$Notice.error({ title: '失败', desc: ret.data.errmsg })
        }
      })
    },
    addShow () {
      this.addData = {}
      this.showTitle = '添加详情'
      this.modal = true
    },
    editShow (item) {
      this.addData = item
      try {
        if (item.GRID_IDS) {
          this.addData.GRID_IDS = item.GRID_IDS.split(',')
        }
      } catch (e) {
        console.log(e)
      }
      this.showTitle = '编辑详情'
      this.modal = true
    },
    deleteShow (item) {
      let param = {
        ID: item.ID
      }
      this.$Modal.confirm({
        title: '确认删除么？',
        content: '请仔细核对后再操作',
        onOk: () => {
          deleteDangZuZhiInfo(param).then(ret => {
            if (ret.data.errcode === 0) {
              this.$Notice.success({ title: '操作成功' })
              this.init()
            } else {
              this.$Notice.error({ title: '失败', desc: ret.data.errmsg })
            }
          })
        }
      })
    },
    newFindGardenByMapList () {
      let data = {
        grade: '5',
        id: this.severUserInfo.company_id
      }
      newFindGardenByMapList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.gardenList = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    }
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
    this.init()
    this.newFindGardenByMapList()
  }
}
</script>

<style scoped>
.container {
  padding: 12px;
}
.page_style {
  margin: 20px 5px;
}

.item1 {
  height: 42px;
  line-height: 40px;
}

.input-frame {
  width: 120px;
  margin-right: 10px;
  float: left;
}

.house-list > .group {
  background: white;
  padding: 10px;
  margin-top: 10px;
}

.house-list > .group > .item {
  border-bottom: 1px solid #f5f5f5;
  padding: 10px 0;
}

.house-list > .group > .item .top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.house-list > .group > .item .title {
  font-size: 14px;
  color: #333333;
}

.house-list > .group > .item .address {
  font-size: 12px;
  color: rgb(128, 128, 128);
  display: flex;
  align-items: center;
}

.house-list > .group > .item .detail {
  font-size: 12px;
  color: dodgerblue;
}

.opt-area-02 {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #abdcff;
  background-color: #f0faff;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.opt-area-02 .right-con {
  width: 100%;
  margin-top: 5px;
  display: flex;
}

.opt-area-02 .left-con {
  font-size: 14px;
  width: 100%;
}

.opt-area-02 .left-con span {
  font-weight: bold;
}

.opt-area-02 .right-con input {
  width: 150px;
  margin-right: 10px;
}

.opt-area-02 .right-con .input-frame {
  width: 200px;
  margin-right: 10px;
}

.table-action-btn {
  margin-bottom: 3px;
}

.container >>> .ivu-btn-small {
  height: 24px;
  padding: 0 5px;
  font-size: 12px;
  border-radius: 3px;
}

.btn-action {
  margin-bottom: 10px;
}

.mp10 {
  margin-right: 10px;
}
.title-style {
  color: red;
}
.mb20 {
  margin-bottom: 20px;
}
.ivu-table-row {
  height: 57px;
}
.demo-spin-icon-load{
  animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
  from { transform: rotate(0deg);}
  50%  { transform: rotate(180deg);}
  to   { transform: rotate(360deg);}
}
.red-star {
  font-family: SimSun;
  color: #f00;
  margin-right: 4px;
}
.demo-spin-col{
  height: 100px;
  position: relative;
  /*border: 1px solid #eee;*/
}
.container>>>.ivu-icon-ios-arrow-forward:before{
  color: black;
}
</style>
